<template>
  <div>
    <Carousel
      @change="changeCarousel"
      :d="carouselData"
      v-if="carouselData.length !== 0"
    />
    <ResultCard
      v-if="resultData.length !== 0"
      :color="resultData[activeIndex].color"
      :title="resultData[activeIndex].title"
      :list="resultData[activeIndex].list"
    />
    <div v-if="resultData.length === 0" class="empty">未查到相关记录</div>
  </div>
</template>

<script>
import { getDiscResultData } from "@/api/task/disposition.js";
import Carousel from "../miniCard/Carousel.vue";
import ResultCard from "../miniCard/ResultCard.vue";

const KEY = {
  disc_ML: "DISC结果概要",
  disc_M: "工作情境下的行为特征",
  disc_L: "压力情绪下的行为特征",
};
// eslint-disable-next-line no-unused-vars
const R_KEY = {
  emotion: "情感",
  work: "工作",
  relation: "人际关系",
  keyword: "关键词",
  advantage: "优势",
  disadvantage: "弱势",
  describ: "结论",
};
const COLOR = ["#8BDE8A", "#DEC68A", "#5284FF"];
export default {
  data() {
    return {
      carouselData: [
        // {
        //   title: "工作环境下的行为表现",
        //   data: [39, 59, 94, 75],
        //   color: "#8BDE8A"
        // },
      ],
      resultData: [],
      activeIndex: 0,
    };
  },
  methods: {
    changeCarousel(index) {
      this.activeIndex = index;
    },
    buildCarouselData(r) {
      let carouselData = [];
      let resultData = [];

      for (let k in KEY) {
        carouselData.push({
          title: KEY[k],
          data: r[k].data,
        });
        let list = [];
        for (let a in R_KEY) {
          if (r[k].hasOwnProperty(a)) {
            list.push({
              title: R_KEY[a],
              desc: r[k][a],
            });
          }
        }

        resultData.push({
          title: KEY[k],
          list,
        });
      }

      carouselData.forEach((r, i) => {
        r.color = COLOR[i];
      });
      resultData.forEach((r, i) => {
        r.color = COLOR[i];
      });
      this.carouselData = carouselData;
      this.resultData = resultData;
    },
  },
  mounted: function() {
    getDiscResultData({ user_id: this.$route.query.id })
      .then((r) => {
        this.buildCarouselData(r);
      })
      .catch(() => {});
  },
  components: { ResultCard, Carousel },
};
</script>
<style lang="scss"></style>
